<template>
  <view class="container">
    <view class="header">
      <text class="location">请选择门店</text>
      <text class="available">空车位{{ availableSpaces }}</text>
    </view>
    <view class="input-section">
      <text class="label">请输入车牌号</text>
      <view class="input-box">
        <picker mode="selector" :range="provinces" @change="selectProvince">
          <view class="picker">
            {{ selectedProvince }}
          </view>
        </picker>
        <input type="text" maxlength="1" v-model="platePart1" />
        <input type="text" maxlength="1" v-model="platePart2" />
        <input type="text" maxlength="1" v-model="platePart3" />
        <input type="text" maxlength="1" v-model="platePart4" />
        <input type="text" maxlength="1" v-model="platePart5" />
        <input type="text" maxlength="1" v-model="platePart6" />
      </view>
      <button class="query-button" @click="queryLicensePlate">查询车牌</button>
    </view>
    <view class="info-section">
      <text class="info-title">积分支付标准：</text>
      <text>1. 每账户每年可缴纳5张临时车牌号...</text>
      <text>2. 每账户最多可绑定2张主车牌...</text>
      <text>3. 200积分/1小时...</text>
    </view>
     <!-- 自定义弹窗 -->
        <div v-if="showModal" class="custom-modal">
          <div class="modal-content">
            <text class="modal-title">支付详情</text>
            <text>停车时间：{{ formattedParkingTime }}</text>
            <text>应付金额：{{ totalCost }} 元</text>
            <div class="modal-buttons">
              <button class="modal-button" @click="closeModal">取消</button>
              <button class="modal-button confirm" @click="confirmPayment">确定</button>
            </div>
          </div>
        </div>
  </view>
</template>

<script>
export default {
  data() {
    return {
      selectedProvince: '苏',
      provinces: ['京', '津', '沪', '渝', '蒙', '新', '藏', '宁', '桂', '港', '澳', '黑', '吉', '辽', '晋', '冀', '青', '鲁', '豫', '苏', '皖', '浙', '闽', '赣', '湘', '鄂', '粤', '琼', '甘', '陕', '贵', '云', '川'],
      showModal: false,
      parkingTime: 0,
      totalCost: 0,
      carId: '',
      platePart1: '',
      platePart2: '',
      platePart3: '',
      platePart4: '',
      platePart5: '',
      platePart6: '',
	  availableSpaces:'',
	  minutes:''
    };
  },
  computed: {
    formattedParkingTime() {
      const hours = Math.floor(this.parkingTime / 60);
      const minutes = this.parkingTime % 60;
      return `${hours}小时${minutes}分钟`;
    }
  },
  methods: {
    selectProvince(e) {
      this.selectedProvince = this.provinces[e.detail.value];
    },
    queryLicensePlate() {
      const carIdd = this.selectedProvince + this.platePart1 + this.platePart2 + this.platePart3 + this.platePart4 + this.platePart5 + this.platePart6;
      wx.request({
        url: `http://127.0.0.1:8702/parkingService/queryCarId?carId=${carIdd}`,
        method: 'POST',
        success: (res) => {
          if (res.statusCode === 200) {
			  console.log(res.data);
            const minutes = parseInt(res.data.data, 10); // 确保 minutes 是一个数字
           if (!isNaN(minutes)) {
                                  this.parkingTime = minutes;
                                  this.totalCost = this.calculateCost(minutes);
                                  this.showModal = true;
                              } else {
                                  console.error('Invalid minutes value:', res.data.minutes);
                              }
                          } else {
                              console.error('Failed to fetch parking time:', res);
                          }
                      },
        fail: (err) => {
          console.error('Error fetching parking time:', err);
        }
      });
    },
    calculateCost(minutes) {
      const hours = Math.floor(minutes / 60);
      const remainingMinutes = minutes % 60;
      const cost = Math.floor(remainingMinutes / 15) + hours * 4; // 每小时4块钱
      return cost;
    },
	queryAvailableSpaces(){
		 wx.request({
		            url: 'http://127.0.0.1:8702/parkingService/queryKong',
		            method: 'GET',
		            success: (res) => {
		                if (res.statusCode === 200) {
							console.log(res.data);
		                    this.availableSpaces = res.data.data; // 假设返回的数据中有 availableSpaces 字段
		                } else {
		                    console.error('Failed to fetch available spaces:', res);
		                }
		            },
		            fail: (err) => {
		                console.error('Error fetching available spaces:', err);
		            }
		        });
	},
	closeModal() {
	      this.showModal = false;
	    },
		 confirmPayment() {
		      // 跳转到支付页面，传递应付金额
		        wx.navigateTo({
		          url: `/pages/paymentProcess/paymentProcess?totalCost=${this.totalCost}`
		        });
		    }
  },
  mounted() {
    this.queryAvailableSpaces(); // 组件挂载时查询空车位数量
  }
};
</script>

<style>
.container {
  background-image: url('/static/images/3.png');
  background-size: cover;
  padding: 20px;
  height: 100vh;
}
.header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}
.location, .available {
  font-size: 16px;
  color: #8a6d3b;
}
.input-section {
  background-color: white;
  padding: 20px;
  border-radius: 10px;
  margin-bottom: 20px;
}
.label {
  font-size: 18px;
  margin-bottom: 10px;
}
.input-box {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}
.picker {
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  border: 1px solid #ccc;
}
input {
  width: 30px;
  height: 30px;
  border: 1px solid #ccc;
  text-align: center;
}
.plate-display {
  margin-bottom: 10px;
  font-size: 16px;
  color: #333;
}
.query-button {
  background-color: #f0ad4e;
  color: white;
  padding: 10px;
  text-align: center;
  border-radius: 5px;
}
.info-section {
  font-size: 14px;
  color: #666;
}
.info-title {
  font-weight: bold;
  margin-bottom: 10px;
}
.custom-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-content {
  background-color: white;
  padding: 20px;
  border-radius: 10px;
  text-align: center;
  width: 80%;
  max-width: 400px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.modal-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 15px;
}

.modal-buttons {
  display: flex;
  justify-content: space-around;
  margin-top: 20px;
}

.modal-button {
  background-color: #f0ad4e;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.modal-button:hover {
  background-color: #ec971f;
}

.modal-button.confirm {
  background-color: #5cb85c;
}

.modal-button.confirm:hover {
  background-color: #4cae4c;
}
</style>